<template>
  <div>
    <el-dialog title="选择" v-model="box" width="50%">
      <el-radio-group v-model="text" class="list">
        <el-row :span="24">
          <template v-for="(item,index) in list" :key="index">
            <el-col :md="4" :xs="12" :sm="4">
              <el-radio :label="item.value">{{ item.name }}</el-radio>
            </el-col>
          </template>
        </el-row>
      </el-radio-group>
    </el-dialog>

    <span>
      <i class="icon-zhuti" @click="open"></i>
    </span>
  </div>
</template>

<script setup>
import {setTheme} from "utils/util.js";
import {useCommonStore} from "@/store/modules/common.js";
import {useNavsStore} from "@/store/modules/tags.js";
import {useRoute, useRouter} from "vue-router"

const optionData = reactive({
  box: false,
  text: "",
  list: [
    {
      name: "默认主题",
      value: "default"
    },
    {
      name: "白色主题",
      value: "theme-white"
    },
    {
      name: "黑色主题",
      value: "theme-dark"
    },
    {
      name: "hey主题",
      value: "theme-hey"
    },
    {
      name: "炫彩主题",
      value: "theme-star"
    },
    {
      name: "vip尊贵主题",
      value: "theme-vip"
    },
    {
      name: "智能工厂主题",
      value: "theme-bule"
    },
    {
      name: "iview主题",
      value: "theme-iview"
    },
    {
      name: "cool主题",
      value: "theme-cool"
    },
    {
      name: "d2主题",
      value: "theme-d2"
    },
    {
      name: "renren主题",
      value: "theme-renren"
    }, {
      name: "beautiful主题",
      value: "theme-beautiful"
    }, {
      name: "Mac OS主题",
      value: "mac-os"
    }
  ]
})
const {box, text, list} = toRefs(optionData)

const route = useRoute()
const router = useRouter()

watch(text, (val) => {
  // this.$store.commit("SET_THEME_NAME", val);
  setTheme(val);
  const commonStore = useCommonStore()
  if (commonStore.isMacOs) {
    router.push(tagWel.value);
    setTimeout(() => location.reload())
  }
})

const themeName = computed(() => {
  const commonStore = useCommonStore()
  return commonStore.themeName
})
const tagWel = computed(() => {
  const navsStore = useNavsStore()
  return navsStore.tagWel
})

onMounted(() => {
  optionData.text = themeName.value;
  if (!optionData.text) {
    optionData.text = "";
  }
})


function open() {
  optionData.box = true;
}
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
}
</style>

